import React, {useEffect, useState} from 'react';
import BtnReload from "../../../../components/BtnReload/BtnReload";
import styles from './index.module.scss';
import {Popover,Menu, Avatar} from 'antd';
import avatarImg from "@/assets/avatar.jpg";
import store , {actions} from "../../../../redux";
import Icon from '@/plugins/Icon';
interface PropsRule {
    reload ?: Function,
}

const TopHeader = (props: PropsRule, ref) => {
    const [userInfo , setData] = useState<any>({});

    useEffect(()=>{
        (async function init(){
            setData(Object.assign({...userInfo} , {
                ...store.getState().userInfo
            }));
        })();
        return function () {
            setData(false);
        }
    },[]);
    function loginOut() {
        store.dispatch(actions.clearStore());
        window.location.reload();
    }
    function UserSetting() {
        return (
            <>
                <Menu>
                    <Menu.Item key='1' icon={<Icon name='SettingOutlined'/>}>修改信息</Menu.Item>
                    <Menu.Item key='2' icon={<Icon name='icon-mima'/>}>修改密码</Menu.Item>
                    <Menu.Item key='3' onClick={loginOut} icon={<Icon name='icon-tuichu'/>}>退出登录</Menu.Item>
                </Menu>
            </>
        );
    }
    return (
        <header className={styles.header}>
            <BtnReload className='reloadBtn' onClick={props.reload}/>
            <Popover content={<UserSetting/>} trigger="hover">
                <div className="user pointer">
                    <Avatar size={25} src={avatarImg} className="avatar"/>
                    <span className="userName">{userInfo?.userName || ''}</span>
                </div>
            </Popover>
        </header>
    );

};
export default TopHeader;
